<!--
 * @Author: dfh
 * @Date: 2024-03-13 14:09:29
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <image :src="$filters.formatImage('maintenancebg.png')" mode="widthFix" style="margin-top: 140rpx;" />
        <button class="btn" @click="loginInHandle">微信用户一键登录</button>
        <!-- <text class="txt">如您点击授权，您将同意并授权</text> -->
        <!-- <text class="txt2">《渣打金融服务协议》、《隐私政策》</text> -->
    </view>
</template>

<script setup>
import { _debounce, setToken } from "@/utils/index";
import { fetchOpenId, fetchToken } from '@/services/login'
import { showToast } from '@/utils/toast'

const loginInHandle = _debounce(
    function () {
        uni.login({
            provider: 'weixin', //使用微信登录
            success: async (loginRes) => {
                if (loginRes.code) {
                    const { status, data, msg } = await fetchOpenId(loginRes.code);
                    if (status === 1) {
                        getTokenFn(data);
                    } else {
                        showToast(msg || '登录失败，请重试')
                    }
                } else {
                    showToast(loginRes.errMsg);
                }
            },
            fail: (e) => {
                console.log(e);
            }
        });
    },
    1000,
    true
);

const getTokenFn = async (openId) => {
    const { msg, status, data } = await fetchToken({ openId })
    if (status === 1) {
        setToken(data || '');
        uni.reLaunch({url:'/pages/home/index'})
    } else {
        showToast(msg || '登录失败，请重试')
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right bottom, #2d3a89, #085bbb);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */

    .btn {
        width: 86%;
        height: 100rpx;
        border-radius: 50rpx;
        margin-top: 60rpx;
        background: #0572e7;
        color: white;
        line-height: 100rpx;
        margin-bottom: 40rpx;
    }

    .txt,
    .txt2 {
        font-size: 20rpx;
        color: white;
    }

    .txt2 {
        margin-top: 10rpx;
        color: #3fd013;
    }
}
</style>